import { Suspense } from 'react'
import { useLocation, useRoutes } from 'react-router-dom'
import routes from '@/routes'
import { Loading } from '@/components/Blank'
import Header from '@/layouts/Header'
import Main from '@/layouts/Main'

const Element = ({ children }) => {
  return <Suspense fallback={<Loading />}>{children}</Suspense>
}

function App() {
  const element = useRoutes(routes)
  const { pathname } = useLocation()

  const NoHeaderPaths = ['/setDashboard', 'setDataset']

  return (
    <div className="app">
      {NoHeaderPaths.includes(pathname) ? (
        <Element>{element}</Element>
      ) : (
        <>
          <Header />
          <Main>
            <Element>{element}</Element>
          </Main>
        </>
      )}
    </div>
  )
}

export default App
